<template>
	<div class="home-recommend">
		<div class="title">
			猜你喜欢
		</div>
		<ul class="recommend-list">
			<li 
				class="recommend-item" 
				v-for="(item,index) of list"
				:key="index"
			>
				<div class="recommend-img">
					<img class="img-content" :src="item.imgUrl" alt="">
				</div>
				<div class="recommend-info">
					<div class="recommend-title">{{item.name}}</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'homeRecommend',
		props: {
			list:Array
		}
	}
</script>

<style lang="scss" scoped>
	@import 'styles/mixins';
	.home-recommend {
		.title {
			line-height: .8rem;
			background-color: #eee;
			text-indent: .2rem;
			margin-top: .2rem;
			font-size:.35rem;
		}
		.recommend-list {
			margin-left: .24rem;
			.recommend-item {
				position: relative;
			    overflow: hidden;
			    padding: .2rem 0;
			    display: flex;
			    .recommend-img {
			    	float: left;
			    	overflow: hidden;
			    	width: 2rem;
			    	height: 2rem;
					.img-content {
						width: 100%;
					}
			    }
			    .recommend-info {
			    	flex:1;
			    	min-width: 0;
			    	padding-left: .22rem;
			    	.recommend-title {
						@include textEllipsis;
						margin-top: .26rem;
					    height: .44rem;
					    color: #212121;
					    font-size: .32rem;
					    line-height: .44rem;
			    	}
			    }
			}
		}
	}
</style>